<template>
  <div class="content_type_wx">
    <el-row><el-button type="primary" @click="handleCreate">新建内容性质</el-button></el-row>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="contTypes" stripe class="table">
      <el-table-column prop="name" label="内容性质" width="250px">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" v-if="scope.row.new || scope.row.edit" size="small" placeholder="不超过8个汉字" :maxlength="8"></el-input>
          <div v-else>
            {{scope.row.name}}<i class="el-icon-edit" @click="handleEdit(scope.$index)"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="我的内容数" class-name="is-center" prop="memberUsedAmount"></el-table-column>
      <el-table-column label="内容库数" class-name="is-center" prop="usedAmount"></el-table-column>
      <el-table-column label="创建时间" class-name="is-center">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="is-center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.new" type="text" @click="handleSave(scope.$index)">保存</el-button>
          <el-button v-if="scope.row.edit" type="text" @click="handleSaveEdit(scope.$index)">保存</el-button>
          <el-button v-show="showRemoveBtn(scope.row.id)" type="text" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {mapState, mapMutations, mapActions} from 'vuex'
  export default {
    data () {
      return {
        tbLoading: false
      }
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        contTypes: state => state.contentManage.contentType
      })
    },
    methods: {
      ...mapActions(['getContentTypes', 'addContentType', 'delContentType', 'setContentType']),
      ...mapMutations(['SET_CONTENT_TYPE']),
      async initPage () {
        this.tbLoading = true
        await this.getContentTypes()
        this.tbLoading = false
      },
      // 是否显示删除按钮
      showRemoveBtn(id) {
        const ids = [1, 2]
        return ids.indexOf(id) === -1
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 新建内容性质
      handleCreate () {
        if (!this.contTypes[0] || !this.contTypes[0].new) {
          this.contTypes.unshift({name: '', new: true})
          this.SET_CONTENT_TYPE(this.contTypes)
        }
      },
      // 保存新建当前行
      async handleSave (index) {
        if (!this.contTypes[index].name) {
          this.$message.warning('请输入属性名称')
          return false
        }
        let res = await this.addContentType(this.contTypes[index])
        if (res.data.code === 1) {
          this.getContentTypes()
          this.$message.success(res.data.msgZ)
        }
      },
      // 编辑当前行
      async handleEdit (index) {
        this.contTypes[index].edit = true
        this.SET_CONTENT_TYPE([].concat(this.contTypes))
      },
      // 保存编辑
      async handleSaveEdit (index) {
        if (!this.contTypes[index].name) {
          this.$message.warning('请输入属性名称')
          return false
        }
        let res = await this.setContentType({
          attrId: this.contTypes[index].id,
          name: this.contTypes[index].name
        })
        this.$message.success(res.data.msgZ)
        this.getContentTypes()
      },
      // 删除
      async handleDel (id) {
        if (!id) {
          this.contTypes.shift()
        } else {
          await this.$confirm('是否确定删除')
          let res = await this.delContentType(id)
          this.$message.success(res.data.msgZ)
          this.getContentTypes()
        }
      }
    }
  }
</script>
<style lang="scss">
  .content_type_wx{
    .el-row{margin-bottom: 15px;}
    .el-icon-edit{margin-left:8px;cursor:pointer;color:#5e6b7c}
  }
</style>
